<template>

    <div class="warp">
        <div class="infoBox">
                <div class="info-title">怎样找到小U出行，在平台约车</div>
                <ul class="info-dec">
                    <li><p >方法一：微信搜索"小U出行”小程序</p></li>
                    <li><p>方法二：保存右侧二维码图片在微信中识别二维码进入小U出行</p></li>
                </ul>
                <p class="info-coupons" >领取拼车优惠券可抵扣乘车费用</p>
                <div class="info-title">联系客服进本群微信群</div>
                <ul class="info-dec">
                    <li><p >小U客服微信：udapinche</p><a class="info-copy1" @click="copyText('info-copy1')" :data-clipboard-text="wxCode"> (复制)</a></li>
                    <li><p>小U客服QQ：2531172180</p><a class="info-copy2" @click="copyText('info-copy2')" :data-clipboard-text="qqCode"> (复制)</a></li>
                </ul>
                <div class="codeImgBox">
                    <img src="http://img.uuuda.com/checkarea/udpcewm.jpg" alt=""/>
                    <p>长按保存二维码</p>
                </div>
            <!--<button class="copy_btn"  :data-clipboard-text="userCode " @click="copyCode()">复制</button>-->



        </div>


        <div class="trip-area-item flex"  style='width:100%;border-radius:0px;margin:0;padding-top:16px;display: flex;' id="tripTop">
            <!-- 进出区域按钮开始 -->
            <div class="trip-area-name " :class="{active: areaType1 == 2}"  @click="changearea('2')">回{{tripName}}({{areasTripIn}})</div>
            <div class="trip-area-name"  :class="{active: areaType2 == 1}"  @click="changearea('1')">出{{tripName}}({{areasTripOut}})</div>
            <div class="borderNone" @click="selectearea">重选区域<img class="change-area-logo"  src='http://img.uuuda.com/checkarea/cxxq.png'/></div>
        </div>
        <div class="home-inner-tip" style="padding-left: 7px;position: relative;top: 0;overflow: hidden;" >
            <div class="dib tip-img-left"></div>
            <div class="dib" style='font-weight:bold;'>全部路线</div>
            <div class="dib tip-img-right"></div>
        </div>
        <div class="trip-inner">
            <div   class="trip-list-item " v-if="allRecommend.length > 0" v-for="item in allRecommend">
                <div class="new-top " style='padding:16px' :class="{garyOpacity:item.hasFull || item.hasMiss}">
                    <img class="new-top-img fl" :src='item.headimgurl' alt=""/>
                    <div class="fl new-top-w">
                        <div class="new-top-name" ><div class='new-top-name-detail'>{{item.nickname}}</div><p class="dib  sex-logo " :class="{ sex_logo1: item.sex==1,sex_logo2:item.sex==2 }"></p></div>
                        <div class="new-top-cnt" >拼成{{item.successCnt}}次 <img class="star-logo" src='http://img.uuuda.com/checkarea/xing.png'/><p class="dib icon-score">{{item.avgEvaluateScore}}分</p></div>
                    </div>
                    <!-- 打电话按钮 -->
                    <button class="small-btn-normal fr" @click="callPhone(item.phone,item.hasMiss,item.hasFull,'')"></button>
                </div>
                <div class="new-center " style='padding:16px'  :class="{garyOpacity:item.hasFull || item.hasMiss}">
                    <div>
                        <div class="trip-inner-line">
                            <img class=" home-position-time-ico" src="http://img.uuuda.com/checkarea/xzsj.png"/>
                            <div class="home-position-time">{{item.departTime[0]}}<p class='home-position-time-app'>({{item.departTime[1]}})</p></div>
                            <p class="home-position-count">￥{{item.price}}/位</p>
                        </div>
                    </div>
                    <div class="new-center-content">
                        <div class="home-position-dashed"></div>
                        <div class="trip-inner-line">
                            <div class="home-position-start">起</div>
                            <div class="home-position-name" >【<p class="font-bold">{{item.stations[0].businessArea}}</p>】{{item.stations[0].name}}</div>
                        </div>
                        <div class="trip-inner-line" v-if="item.viaStations">
                            <div class="home-position-jing">经</div>
                            <div class="home-position-name home-position-namejing">{{item.viaStations}}</div>
                        </div>
                        <div class="trip-inner-line">
                            <div class="home-position-end">终</div>
                            <div class="home-position-name" >【<p class="font-bold">{{item.stations[1].businessArea}}</p>】{{item.stations[1].name}}</div>
                        </div>
                    </div>
                    <div class="new-center-comment" v-if="item.remark&& item.remark!='undefined'">
                        备注：{{item.remark}}
                    </div>
                </div>
                <div class="ofh">
                    <p class="ofh-hasfull"  v-if="item.hasFull&&!item.hasMiss || item.hasFull&&item.hasMiss">车已满</p>
                    <p class="home-dis-tip" v-if="item.hasMiss&&!item.hasFull">已过时</p>
                </div>
            </div>
            <div   class="trip-list-item" v-if="manualTripsNumbers > 0" v-for="item in manualTrips">
                <div class="new-top" style='padding:16px'>
                    <p class="new-top-text">未注册</p>
                    <img class="new-top-img fl" :src='item.randHeadImage' alt=""/>
                    <div class="fl new-top-w">
                        <div class="new-top-name" >匿名车主</div>
                        <div class="new-top-cnt" style="color:#999999;">拼车群内行程 </div>
                    </div>
                    <button class="small-btn-normal fr" @click="callPhone(item.phone,'','',true)"></button>

                </div>
                <div class="new-center" style='padding:12px 16px;'>
                    <div>
                        <div class="trip-inner-line">
                            <img class=" home-position-time-ico" src="http://img.uuuda.com/checkarea/xzsj.png"/>
                            <div class="home-position-time">{{item.departTime[0]}}<p class='home-position-time-app'>({{item.departTime[1]}}</p></div>)
                        </div>
                    </div>
                    <div class="new-center-content">
                        <div class="trip-inner-line">
                            <div class="home-position-start">行</div>
                            <div class="home-position-name">{{item.stations}}</div>
                        </div>
                    </div>
                </div>
                <p class="new-bottom-tip">联系我时请说明是在小U出行上看到的</p>
            </div>
            <div class="areatrip-footer vertical-center horizonal-center" v-if="manualTripsNumbers >0 || allRecommend.length >0">
                <p>——</p>

                <p style='padding:0px 8px;margin:0 16px;'>暂无更多行程</p>

                <p>——</p>
            </div>
            <div v-if="allRecommend.length == 0 && manualTripsNumbers == 0">
                <div class="empty-wrap">
                    <img style="width: 100px; height: 55px; background-color: #f5f5f5;"  src="http://img.uuuda.com/wxapp/empty.png"/>
                    <p>暂无推荐行程</p>
                </div>
            </div>
        </div>
        <!--遮罩-->
        <div  class="areachange-mask" v-if="showAreaChange" >
            <div class="areachange-wrap animated  zoomIn">
                <p class='checkarea-center-title'>北京市</p>
                <div class='location-selects'>
                    <div class="location-dest " :class="{active: location == item[0]}" v-for="item in loactionGroup[0]" @click="setSelect(item[0])" v-if="item[1]>0" >
                      {{item[0]}}({{item[1]}})
                    </div>
                </div>
                <p class='checkarea-center-title' >北京周边</p>
                <div class='location-selects'>
                    <div class="location-dest " v-for="item in loactionGroup[1]" :class="{active: location == item[0]}" @click="setSelect(item[0])" v-if="item[1]>0">
                        {{item[0]}}({{item[1]}})
                    </div>
                </div>
            </div>
        </div>

        <!--拨打电话的弹出-->
        <div class='wx_dialog_container' v-if="showDialog">
            <div class='wx-mask'></div>
            <div class='wx-dialog' style='width:280px;'>
                <div class='wx-dialog-content switch-toast' >微信搜索小U出行，小程序下单享有行程保险，还可使用拼车优惠券抵扣车费呦～</div>
                    <label class="checkBox" for="checkbox">
                        <input class="dialog-checkbox" type="checkbox" v-model="checkBoxMsg"  value="1" id="checkbox"/>
                        <p>下次不在提示</p>
                    </label>
                <div class='wx-dialog-footer' style='line-height:48px;' @click="closeDialog()">
                    <div class='wx-dialog-btn'  style='color:#1A9AFF;'>知道了</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
let axios = require("axios");
var miment =require("../../static/miment");
var manualTripstList = [];
import Clipboard from 'clipboard';
export default {
    data() {
        return {
            areaType1:2,//回
            areaType2:'',//去
            loactionGroup:[],//存放地区数据
            location:'',//选择的地区
            tripName:'',//地区名字
            areasTripIn: '',//地区行程数量
            areasTripOut:'',
            showAreaChange:false,//是否显示重新选区弹窗
            type:2,//出进城类型行程类型，1 对应页面（进） 2  对应页面（出）
            allRecommend:[],
            manualTripsNumbers:'',
            pageNum:1,
            manualTrips:[],
            scrollToBottom:1,//判断是否滑动到底的锁
            showDialog: false,//弹窗控制和文案
            checkBoxMsg:[],
            phone:'',
            wxCode:'udapinche',
            qqCode:'2531172180'
        };
    },
    filters:{
        cash:function(value){
            value +='';
            return value.replace(/(?!^)(?=(\d{3})+$)/g, ',')
        }
    },
    created() {
        let self=this;

        window.onscroll = function(){
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
            //滚动条到底部的条件
            if(scrollTop+windowHeight==scrollHeight){
                //写后台加载数据的函数
                console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
                console.log(self.scrollToBottom)
                if (self.scrollToBottom < 0) return;
                self.loadPage();
            }
        }

    },
    mounted(){
        this.initPage();
    },

    watch:{


    },
    methods: {

        //初始化页面
        initPage(){
            let self = this;
            let query = this.$route.query;//接受路径参数
            let area_id = query.adname || '';
            manualTripstList = [];
            self.manualTrips=[];
            self.pageNum = 1;
            self.scrollToBottom = 1;
            let locationName=localStorage.getItem('locationName')

            if(area_id){
                localStorage.setItem('locationName',area_id);

            }else if(!area_id && !locationName){
                self.showAreaChange=true
            }
            self.tripName=localStorage.getItem('locationName');


            //1、当前时间戳
            let nowtime = Date.parse(new Date()) / 1000;
            localStorage.setItem('areatriptime', nowtime)
            //请求城市区域接口
            axios({
                method: "post",
                url: "/api/tourists/numbertripsareas",
                params: {

                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){

                    self.loactionGroup=data.data
                }
            });
            self.changeAreaTime();
            self.initTripAreaNum();
            self.initTripSeek();


        },
        initTripAreaNum(){
            let self = this;
            //请求出进城 数量接口
            axios({
                method: "post",
                url: "/api/tourists/numberareastripinout",
                params: {
                    commonAreas: localStorage.getItem('locationName'),
                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){
                    self.areasTripIn=data.data[0]
                    self.areasTripOut=data.data[1]
                }
            });
        },
        //请求行程列表接口
        initTripSeek:function(){
            let self = this;
            //请求出进城 数量接口
            axios({
                method: "get",
                url: "/api/tourists/seek",
                params: {
                    adname: localStorage.getItem('locationName'),
                    tripType: 1,
                    type: self.type,
                    departTime: localStorage.getItem('areatriptime'),
                }
            }).then(function(res) {
                let data = res.data;
                if(data.errno == 200){
                    // 认证的行程如果小于等于1条 且 注册行程有数量就同事请求注册行程接口渲染数据
                    if (data.data.trips.length <= 2 && parseInt(data.data.manualTripsNumbers)>0){
                        self.loadPage();
                    }
                    let nowt = new Date().getTime() / 1000;
                    data.data.trips.map(function (item) {
                        item.hasMiss = item.departTime < nowt;
                        item.departTime = self.timeShow(item.departTime);
                        item.hasFull = item.seatNum - item.passengerNum == 0;
                        return item;
                    });

                    self.allRecommend=data.data.trips;
                    self.manualTripsNumbers= parseInt(data.data.manualTripsNumbers);

                }
            });
        },
        //请求录入的数据
        loadPage(){
            let self =this;
            axios({
                method: "get",
                url: "/api/tourists/manualtrips",
                params: {
                    adname: localStorage.getItem('locationName'),
                    tripType: 1,
                    departTime:localStorage.getItem('areatriptime'),
                    pageCode: self.pageNum,
                    type:self.type
                }
            }).then(function(res) {
                let data = res.data;
                let rdata=res.data.data;

                if(data.errno == 200){

                    if (rdata.length>0){
                        for(let i=0;i<rdata.length;i++){
                            let temp = {
                                cTime: rdata[i].cTime,
                                creator: rdata[i].creator,
                                departTime: self.timeShow(rdata[i].departTime),
                                endAdname: rdata[i].endAdname,
                                id: rdata[i].id,
                                phone: rdata[i].phone,
                                price: rdata[i].price,
                                startAdname: rdata[i].startAdname,
                                stations: rdata[i].stations,
                                randHeadImage: rdata[i].randHeadImage,
                            }
                            // manualTripstList[(self.pageNum - 1)*10 + i] = temp;
                            self.manualTrips.push(temp);

                        }

                        // self.manualTrips= manualTripstList;

                        self.pageNum++;
                    }else{
                        self.scrollToBottom = -1;
                    }

                }
            });
        },
        //时间工具方法
        timeShow(time){
            let stamp = time * 1000;
            let nowDay = new Date().getDate();
            let valueDay = new Date(time * 1000).getDate();
            let getHours = new Date(time * 1000).getHours();//获取小时
            let getMinutes = new Date(time * 1000).getMinutes();//获取分
            let valueTime = (getHours * 60 * 60) + (getMinutes * 60);//获取时间值
            let text = '';
            if (nowDay == valueDay) {
                timeStatus('今天');
            }
            if (nowDay - valueDay == 1 || valueDay - nowDay > 25) {
                timeStatus('昨天');
            }
            if (valueDay - nowDay == 1 || nowDay - valueDay > 25) {
                timeStatus('明天');

            }
            // 天的状态
            function timeStatus(status){
                if (valueTime <= computTime(8, 30)) { //早上8：30
                    text = '【' + status+'早上】';
                } else if (valueTime > computTime(8, 30) && valueTime <= computTime(12, 0)) { //上午8:30 -12:00
                    text = '【' + status +'上午】';
                } else if (valueTime > computTime(12, 0) && valueTime <= computTime(17, 30)) {// 下午 12:00 - 17:30
                    text = '【' + status +'下午】';
                } else if (valueTime > computTime(17, 30) && valueTime < computTime(23, 59)) {// 晚上 17:30以后
                    text = '【' + status +'晚上】';
                }
            }
            //根据时分计算秒
            function computTime (h, m) {
                let value = (h * 60 * 60) + (m * 60);//获取时间值
                return value;
            }
            return [text +' '+miment(stamp).format('hh:mm'), miment(stamp).format('MM月DD日')];

        },


        //进出区域点击
        changearea(id){
            let self=this;
            self.areaType1=id;
            self.areaType2=id;
            self.type=id;
            self.allRecommend=[];
            self.manualTrips=[];
            self.pageNum = 1
            self.scrollToBottom = 1
            self.initTripSeek();


        },
        changeAreaTime(){
            let self=this;
            let nowHours=new Date().getHours();//当前小时

            //1 是回 2是出
            if (nowHours >= 6 && nowHours <12){
                self.toChangeArea(2); //出
            } else if (nowHours >= 12 && nowHours<19){
                self.toChangeArea(1);//回
            } else if (nowHours >=19 && nowHours < 23 || nowHours >= 0 && nowHours<6){
                self.toChangeArea(2);//出
            }
            // 6-12出  12-20 回  20-6 出
        },

        toChangeArea(type) {
            let self=this;
            if(type==1) { //显示回
                self.areaType1=2;
                self.areaType2=0;
                self.type=2;
            }else { //显示出
                self.areaType1=0;
                self.areaType2=1;
                self.type=1;
            }

        },

        //重新选择区域按钮
        selectearea(){
            let self=this;
            self.showAreaChange=true
            self.allRecommend=[];
            self.manualTrips=[];
            self.pageNum = 1
            self.scrollToBottom = 1

        },
        //选择具体区域按钮
        setSelect(location){
            let self=this;
            localStorage.setItem('locationName',location);
            self.location=location
            self.tripName=localStorage.getItem('locationName');
            setTimeout(function () {
                self.showAreaChange=false
            },500)
            self.initTripAreaNum();
            self.initTripSeek();

        },
        //打电话
        callPhone(phone,miss,full,manual){
            let self =this;
            let isChecked =localStorage.getItem('isChecked');
            self.phone=phone
            if(miss&&!full&& isChecked!='1'){
                self.showDialog=true
            }else if(manual && isChecked!='1'){
                self.showDialog=true
            }else {
                if (!phone) {
                    self.$dialog.toast({
                        mes: '此用户未配置电话信息',
                        timeout: 1500
                    });
                    return;
                }
                window.location.href = "tel:" + phone;
            }
        },
        closeDialog(){
            let self=this;
            self.showDialog=false
            if(self.checkBoxMsg.length>0){
                localStorage.setItem('isChecked','1')
            }else {
                localStorage.setItem('isChecked','0')
            }
            if (!self.phone) {
                self.$dialog.toast({
                    mes: '此用户未配置电话信息',
                    timeout: 1500
                });
                return;
            }
            window.location.href = "tel:" + self.phone;
        },
        //复制粘贴
        copyText(className){
            let self=this;
            const clipboard = new Clipboard('.'+className);
            clipboard.on('success', function(e) {
                e.clearSelection();
                // alert('复制成功')
                self.$dialog.toast({
                    mes: '复制成功',
                    timeout: 1500
                });
            });
            //失败回调
            clipboard.on('error', function(e) {
                // alert('复制失败,请手动复制');
                self.$dialog.toast({
                    mes: '复制失败,请手动添加',
                    timeout: 1500
                });
            });

        },



    }
};
</script>

<style>
    /*公共样式*/
    .iconfont {
        font-family:"iconfont" !important;
        font-size:18px;
        width: 18px;
        display: inline-block;
        color: #4c4c4c;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .font-bold{
        display: inline-block;
        font-weight: bold;
    }
    .vertical-center {
        display: flex;
        align-items: center;
    }
    .horizonal-center{
        display: flex;
        justify-content: center;
    }
    .flex{
        display: flex;
    }
    .dib{
        display: inline-block;
    }
    .ofh{
        overflow: hidden;
    }


    /*行程通用样式*/
    .home-position-start,
    .home-position-end,
    .home-position-jing{
        display: block;
        width: 14px;
        height: 14px;
        text-align: center;
        line-height: 14px;
        font-size: 8px;
        color: #fff;
        border-radius: 50%;

    }
    .home-position-start{
        background-color: #1A9AFF;
    }
    .home-position-end{
        background-color: #D5AE5C;
    }
    .home-position-jing{
        background-color: #C4C4C4;
    }


    .trip-list-item{
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 15px;
        overflow: hidden;
        position: relative;
    }
    .new-center-content{
        position: relative;
    }
    .home-position-dashed{
        position: absolute;
        top: 10px;
        width: 0;
        bottom: 10px;
        left: 6px;
        border-right: 2px #ededed dashed;
    }
    .trip-inner .new-top{
        padding-bottom: 10px;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
    }
    .new-top-img{
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }
    .new-top-name{
        font-size: 16px;
        color:#1A1A1A;
        display: inline-block;
        font-weight: bold;
        position: relative;
    }

    .new-top-phone p{
        color: #1A9AFF;
    }
    .new-top-r{
        text-align: right;
        position: absolute;
        right: 10px;
    }

    .new-top-r button{
        display: inline-block;
    }
    .new-top-w{
        padding-left: 5px;
    }
    .new-top-cnt{
        font-size: 12px;
        color:#999;
    }

    .trip-inner .new-center{
        padding: 5px 0;
        overflow: hidden;
    }
    .new-center{
        width: auto;
    }

    .new-top-cnt {
        font-size: 12px;
        /*width: 55px;*/
        color: #999;
    }
    .trip-inner {
        border-top: 1px solid #f5f5f5;
        padding: 0px 0 0 0px;
        /*text-align: right;*/
        overflow: hidden;
        position: relative;
        margin: 2px 7px;

    }
    .trip-inner .new-bottom button{
        display: inline-block;
        margin-left: 10px;
    }
    .trip-inner-line{
        display: flex;
        justify-content: flex-start;
        line-height: 30px;
        position: relative;
    }
    .trip-inner-line .home-position-start,
    .trip-inner-line .home-position-jing,
    .trip-inner-line .home-position-end{
        position: relative;
        top: 9px;

    }
    .trip-inner-line .home-position-name{
        font-size: 14px;
        color: #4c4c4c;
        padding-left: 5px;
        width: 100%;
        text-align: left;
    }
    .trip-inner-line .home-position-namejing{
        color: #999;
    }
    .trip-inner-line .icon-clock1{
        font-size: 15px;
        color:#B7C1C8;

    }
    .trip-inner-line .home-position-time{
        font-size: 14px;
        color: #1A1A1A;
        padding-left: 5px;
    }
    .trip-inner-line .home-position-count{
        position: absolute;
        right: 0;
        top: 3px;
        color: #1A1A1A;
        font-size: 14px;
    }

    .new-center-comment{
        background-color: #f5f5f5;
        color: #999;
        font-size: 12px;
        margin-top: 5px;
        padding: 10px;
    }

    .input-wrap input{
        height: 56px;
        font-size: 15px;
        color: #1a1a1a;
    }

    .input-wrap .input-title .icon-clock1{
        font-size: 14px;
        color: #999;
        position: relative;
        top: -20px;
    }
    .input-wrap .input-title .iconfont{
        width: 14px;
        height: 14px;
    }
    .input-wrap .input-arr{
        position: relative;
        top: 22px;
    }
    .empty-wrap{
        margin-top: 40px;
        text-align: center;
    }
    .empty-wrap p{

        font-size: 14px;
        color: #808080;
    }


    .tip-img-left{
        width: 70px;
        height: 11px;
        margin-right: 10px;
        background: url(http://img.uuuda.com/wxapp/left.png) center center no-repeat;
        background-size: contain;
    }
    .tip-img-right{
        width: 75px;
        height: 11px;
        margin-left: 10px;
        background: url(http://img.uuuda.com/wxapp/right.png) center center no-repeat;
        background-size: contain;
    }
    .home-position-center div{
        font-size: 14px;
        height: 38px;
        box-sizing: border-box;
        color: #4c4c4c;
    }

    .home-position-depart .icon-clock1{
        font-size: 15px;
        color :#999;
    }
    .home-position-depart .home-position-time{
        font-size: 14px;
        color: #1A1A1A;
        padding-left: 5px;
    }



    .search-input input{
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
        font-size: 14px;
    }
    .home-inner-tip{
        color: #465D7E;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        padding-left: 10px;
        text-align: center;
    }
    .home-dis-tip{
        font-size: 10px;
        color:white;
        position:absolute;
        top:0px;
        left: 2px;
        padding: 3px 10px 3px 4px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #FF4C6A;
    }
    /* 新添加样式 */
    .trip-inner{
        margin:2px 12px;

    }
    .trip-inner-line .home-position-name{
        color: #1A1A1A;
        display: inline-block;
    }
    .tip-img-left{
        background:url(http://img.uuuda.com/wxapp/car-logo.png) center center no-repeat;
        background-size:contain;
        -webkit-transform:rotateY(180deg);
        transform: rotateY(180deg);
        width:49px;

    }
    .tip-img-right{
        background:url(http://img.uuuda.com/wxapp/car-logo.png) center center no-repeat;
        background-size:contain;
        width:49px;

    }
    .new-top-w{
        padding-left:8px;
    }

    .new-top-cnt .icon-score{
        font-size:12px;
        width:55px;
        color:#999;
        margin-left: 4px;

    }
    .star-logo{
        width: 12px;
        height: 12px;
        margin-left: 8px;

    }
    .sex-logo{
        position:absolute;
        margin-left:4px;
        top:0px;

    }
    .sex_logo1{
        background: url('http://img.uuuda.com/checkarea/man.png')0 0 no-repeat;
        background-size: 100% 100%;
        width: 10px;
        height: 10px;
    }
    .sex_logo2{
        background: url('http://img.uuuda.com/checkarea/female.png')0 0 no-repeat;
        background-size: 100% 100%;
        width: 10px;
        height: 10px;
    }
    .trip-inner .new-top {
        padding-bottom:12px;
        border-bottom:1px solid #ededed;

    }
    .trip-inner-line .home-position-count{
        top:1.5px;
        font-weight: bold;
        font-size: 16px;
    }

    .trip-list-item{
        background: white;
        /* width:93.6%; */
        padding: 0px;
        margin:0 auto 16px auto;
        box-shadow: 0 0 2px 0 rgba(0,0,0,0.05);

    }

    .new-center-comment{
        padding:15px;
    }
    .trip-inner .new-bottom{
        border-top:0px;
    }
    .new-center-content{
        /* margin-bottom:24px; */
    }
    .small-btn-normal{
        position: relative;
        right: 0px;
        width: 32px;
        height: 32px;
        background: url('http://img.uuuda.com/checkarea/bddh.png')0 0 no-repeat;
        background-size: 100% 100%;
        border:none;
        margin-top: 8px;

    }



    /*这里没改*/
    .timeSelectDetail p{
        position: relative;
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 4px;
        width: 100px;
        text-align: center;
        color: #999999;
        background: white;
        float: left;
        border: 1px solid #ededed;
        margin-right:9px;
        margin-bottom:16px;
    }

    .locationSelectDetail p{
        position: relative;
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 8px;
        text-align: center;
        color: #999999;
        background: white;
        float: left;
        border: 1px solid #ededed;
        margin-right:9px;
        margin-bottom:16px;
        font-size: 12px;
    }



    .garyOpacity{
        opacity: .7
    }

    .trip-inner-line .home-position-namejing{
        padding-left:10px;
        color:#666666;
    }
    .ofh-hasfull{
        font-size: 10px;
        color:white;
        position:absolute;
        top:0px;
        left: 2px;
        padding: 3px 10px 3px 4px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #FF4C6A;
    }



    .trip-inner-line .home-position-time{
        font-weight: bold;
    }
    .trip-inner-line .icon-clock1{
        color: #667A90;
    }

    .select-check p{
        font-size: 14px;
        color:#808080;
        margin-left: 8px;
        display: inline-block;
        position: relative;
        top:1.5px;
    }

    .select-time img{
        width: 6px;
        height: 4px;
        margin-left: 4px;
        position:relative;
        top:-1.5px;

    }
    .areatrip-footer{
        color: #999999;
        font-size: 12px;
        text-align: center;
        padding: 0px 0 44px 0;
    }
    .home-position-time-app{
        color: #666;
        font-size: 12px;
        margin-left: 4px;
        display: inline-block;
    }

    .empty-wrap{
        margin-top:150px;

    }
    .new-bottom-tip{
        color:#999;font-size: 12px;float:left;margin-left:13px;
        margin-bottom: 12px;
    }
    .small-btn-blue,.small-btn-gray{
        padding:2px;
    }
    .new-top-name-detail{
        position: relative;
        display: inline-block;
        max-width:150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

    /*选择区域*/
    .trip-area-item{
        background: white;
        padding: 0px 0px 16px 0px;
        margin:0 auto 15px auto;

    }
    .trip-area-name{
        font-size: 14px;
        color: #1a1a1a;
        padding: 3px 11px;
        border:1px solid #c4c4c4;
        border-radius: 4px;
        margin-left: 16px;
    }
    .active{
        color: #1A9AFF;
        border: 1px solid #1A9AFF;
    }
    .borderNone{

        border-left: 1px solid #c4c4c4;
        margin-left: 25px;
        font-size: 14px;
        color: #1a1a1a;
        padding: 3px 11px;
    }
    .change-area-logo{
        width: 8px;
        height: 8px;
        margin-left: 4px;

    }
    /*遮罩样式*/
    .areachange-wrap{
        width: 328px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -164px;
        margin-top: -200px;
        padding-top: 15px;
        background-color: #fff;
        border-radius: 10px;
        z-index: 100;
        overflow-y: scroll;
        height: 400px;
        padding-bottom: 32px;
        -webkit-overflow-scrolling: touch;


    }

    .areachange-mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .6);
    }
    /*选择区域样式*/
    .checkarea-center-title{
        font-size: 18px;
        display: block;
        position: relative;
        color: #1a1a1a;
        font-weight: bold;
        margin: 16px 16px 0 16px;
    }
    .location-dest.active {
        color:#1A9AFF;
        border:1px solid #1A9AFF;

    }
    .location-dest{
        padding: 3px 6px;
        color: #666666;
        display: inline-block;
        margin-top: 16px;
        margin-left: 16px;
        font-size: 14px;
        border:1px solid #dedede;
        border-radius: 2px;
    }
    /*时间logo*/
    .home-position-time-ico{
        width: 12px;
        height: 12px;
        position: relative;
        top: 8px;

    }
    .new-top-text{
        font-size: 10px;
        color:white;
        position:absolute;
        top:0;
        left: 2px;
        padding: 3px 10px 3px 4px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background:#55bcff;
    }
    /*打电话弹窗遮罩*/
    .wx-mask{
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
    }
    .wx-dialog{
        position: fixed;
        z-index: 5000;
        width: 80%;
        max-width: 300px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #FFFFFF;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
    }
    .wx-dialog-title{
        font-size: 18px;
        padding: 15px 15px 5px;
    }
    .wx-dialog-content{
        padding: 25px 15px 5px;
        min-height: 40px;
        font-size: 16px;
        line-height: 1.3;
        word-wrap: break-word;
        word-break: break-all;
        color: #999999;
    }
    .switch-toast{
        font-size: 16px;
        color: #1a1a1a;
        font-weight: bold;
        padding:25px 15px 25px;
        line-height: 26px;

    }
    .wx-dialog-footer{
        display: flex;
        align-items: center;
        position: relative;
        line-height: 45px;
        font-size: 17px;
        border-top:1px solid #ededed;
    }
    .wx-dialog-footer::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #D5D5D6;
        color: #D5D5D6;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
    .wx-dialog-btn{
        display: block;
        -webkit-flex: 1;
        flex: 1;
        background: white;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        position: relative;
    }

    .checkBox{
        position:relative;
        text-align:left;
        display:block;
        padding: 0 0 24px 24px;
    }
    .checkBox p{
        display: inline-block;
    }
    .dialog-checkbox{
        width: 12px;
        height: 12px;
    }
    /*头部信息展示部分*/
    .infoBox{
        position: relative;
        width: 100%;
        background: white;
        padding:16px;
    }
    .info-title{
        position: relative;
        color: #002B66 ;
        font-size:16px;
        font-weight: bold;
        margin-bottom: 16px;
    }
    .info-dec{
        position: relative;
        width: 60%;
        left: 18px;
        list-style-type:disc;
        color:#1A9AFF;
    }
    .info-dec li{
        margin-bottom: 8px;
    }

    .info-dec p{
        color:#002B66;
        font-weight: bold;
        display: inline-block;
    }
    .info-dec span{
        color:#1A9AFF;
    }
    .info-coupons{
        position: relative;
        display: block;
        color: #C8A561;
        font-size: 14px;
        font-weight: bold;
        padding: 0px 0 10px 18px;
    }
    .codeImgBox{
        position: absolute;
        width: 96px;
        right: 12px;
        bottom: 24px;
        height: 120px;
        background: #1a9aff;
    }
    .codeImgBox img{
        width: 88px;
        height: 88px;
        position: relative;
        top: 4px;
        left: 4px;
        margin-bottom: 8px;
    }
    .codeImgBox p{
        position: relative;
        left: 4px;
        color: white;
        font-size: 12px;
    }
  /*动画*/
    .animated {
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
    .animated.hinge {
        -webkit-animation-duration: .6s;
        animation-duration: .6s;
    }
    /*the animation definition*/
    @-webkit-keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3)
        }
        50% {
            opacity: 1
        }
    }
    @keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            -ms-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3)
        }
        50% {
            opacity: 1
        }
    }
    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn
    }


</style>
